Блог

Я пытаюсь использовать ar.js и aframe внутри моего расширения vue Chrome. У меня возникла проблема с политикой безопасности контента после создания расширения в vue ui:

 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
  

Чтобы устранить эту проблему, я изменил csp внутри манифеста папки dist, но мне нужно исправить проблему. Кто-нибудь может мне помочь?

Это мой код:

 <template>
  <a-scene ref="scene" vr-mode-ui="enabled: false" embedded arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'>
    <a-camera gps-camera rotation-reader></a-camera>
    </a-scene>
</template>

<script>
import 'aframe/dist/aframe-master'
import 'ar.js'

export default {
  name: 'HelloWorld',
  data() {
    return {
      coords: []
    }
  },
  mounted() {
    //browser.runtime.sendMessage({})
    this.initPosition()
    .then( () => {
      this.addEntity()
    })
  },
  computed: {

  },
  methods: {
    async initPosition() {
      navigator.geolocation.getCurrentPosition( (position) => {
        console.log(position)
        this.coords.push([ position.coords.latitude, this.coords.position.longitude ])
      })
    },
    async addEntity() {
      const model = document.createElement('a-entity')
        model.setAttribute('gps-entity-place', `latitude: ${this.coords[0]}; longitude: ${this.coords[1]};`);
        model.setAttribute('gltf-model', './assets/zombie/zombie.gltf');
        model.setAttribute('rotation', '0 180 0');
        model.setAttribute('animation-mixer', '');
        model.setAttribute('scale', '0.5 0.5 0.5');
        this.$refs.scene.appendChild(model)
    } // end addEntity
  }
}
</script>